<template>
    <div class="app-layout">
      <!-- 主内容区域 -->
      <main class="main-content">
        <RouterView/>
      </main>
      <!-- v-if v-show -->
      <NavTest v-show="isHeader"/>
     </div>
</template>

<script setup name="App">
import { computed, ref } from 'vue';
import { RouterView, useRoute, useRouter } from 'vue-router';
import NavTest from './components/NavTest.vue'

const route = useRoute()
const isHeader = computed(()=>{
    return route.name !== "recipe_datail"
          && route.name !== "small_category"
          && route.name !== "search"
          && route.name !== "login"
          && route.name !=="register"
          && route.name !== "keyword_search"
})

</script>

<style scoped>
.app-layout {
  position: relative;
  min-height: 100vh;
}

.main-content {
  padding-bottom: 60px; /* 为底部导航栏留出空间 */
}
</style>
